<template>
    <view class="mainPge">
        <!-- 公共头部 -->
        <headerPublic title="个人记录" />
        <!--主体-->
        <view class="page-content">
            <!-- 顶部固定 -->
            <view class="tabs">
                <!--搜索-->
                <view class="top-search" style="margin-top: 28rpx">
                    <uv-input v-model="title" placeholder="搜索" class="search-ipt" border="none">
                        <template v-slot:prefix>
                            <uv-icon name="search" size="24" color="#999" @click="$refs.paging.reload()"></uv-icon>
                        </template>
                    </uv-input>
                </view>
            </view>
            <!-- 列表 -->
            <z-paging :fixed="false" style="height: 81vh" ref="paging" v-model="list" @query="querylist">
                <view class="Plist">
                    <view
                        class="swipe-item"
                        v-for="(item, index) in list"
                        :key="item.id || index"
                        @touchstart="touchStart(item, index, $event)"
                        @touchmove="touchMove(item, index, $event)"
                        @touchend="touchEnd(item, index, $event)"
                    >
                        <!-- 内容区域 -->
                        <view class="Pitme content" :style="{ transform: `translateX(${item.translateX}px)` }" @click.stop="goDetail(item,index)">
                            <view class="pt-row">
                                <text class="ptitle">{{ item.title }}</text>
                                <view class="ptit">
                                    <text class="t1">{{ item.flCreateTime }}</text>
                                </view>
                            </view>
                            <view>
                                <view class="ptit">
                                    <text class="t2">{{ item.text }}</text>
                                </view>
                            </view>
                        </view>
                        <!-- 操作按钮 -->
                        <view class="operate-buttons">
                            <view class="edit-btn" @click.stop="editItem(item, index)">修改</view>
                            <view class="delete-btn" @click.stop="deleteItem(item, index)">删除</view>
                        </view>
                    </view>
                </view>
            </z-paging>
            <!-- 新建按钮 -->
            <view class="newadd" @click="addnewfn" style="width: 90rpx; height: 90rpx"><uv-icon name="plus" color="#fff" size="24"></uv-icon></view>
        </view>
    </view>
</template>
<script>
import { getWorklogList, deletWorklog } from '@/api/worklog.js';
export default {
    name: 'header',
    data() {
        return {
            list: [],
            title: '',
            pageSize: 10,
            pageNumber: 1,
            startX: 0, // 触摸开始的X坐标
            threshold: 50, // 触发侧滑的最小距离
            buttonWidth: 136, // 操作按钮总宽度
            currentIndex: -1 // 当前侧滑打开的项索引
        };
    },
    onLoad() {},
    onShow() {
    	this.$refs.paging.reload();
    },
    methods: {
        // 新建
        addnewfn() {
            uni.navigateTo({
                url: '/documentManagement/worklog/infoset'
            });
        },
        // 获取列表信息
        getList() {
            let querydata = {
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                title: this.title
            };
            getWorklogList(querydata).then((res) => {
                if (res.data !== [] && res.code == 200) {
                    let reslsit = res.data.records.map((item) => ({
                        ...item, // 复制原有属性
                        translateX: 0 // 添加新属性
                    }));
                    this.$refs.paging.complete(reslsit);
                }
            });
        },
        // 触摸开始
        touchStart(item, index, e) {
            // 关闭其他已打开的项
            if (this.currentIndex !== -1 && this.currentIndex !== index) {
                this.list[this.currentIndex].translateX = 0;
            }
            this.startX = e.touches[0].clientX;
            this.currentIndex = index;
        },
        // 触摸移动
        touchMove(item, index, e) {
            const moveX = e.touches[0].clientX;
            const diffX = moveX - this.startX;
            // 向右滑动（关闭侧滑）
            if (diffX > 0) {
                item.translateX = Math.min(0, diffX);
            }
            // 向左滑动（打开侧滑）
            else if (diffX < 0) {
                item.translateX = Math.max(-this.buttonWidth, diffX);
            }
        },
        // 触摸结束
        touchEnd(item, index, e) {
            const endX = e.changedTouches[0].clientX;
            const diffX = endX - this.startX;

            // 滑动距离超过阈值，显示按钮
            if (diffX < -this.threshold) {
                item.translateX = -this.buttonWidth;
            }
            // 滑动距离不足或向右滑动，隐藏按钮
            else {
                item.translateX = 0;
            }
        },
        // 修改
        editItem(item, index) {
            // 重置侧滑状态
            item.translateX = 0;
            // 处理编辑逻辑
            uni.navigateTo({
                url: `/documentManagement/worklog/infoset?id=${item.id}&pagetype=edit`
            });
        },
		//查看详情
		goDetail(item, index){
			// 重置侧滑状态
			item.translateX = 0;
			// 处理编辑逻辑
			uni.navigateTo({
			    url: `/documentManagement/worklog/recordDetails?id=${item.id}`
			});
		},
        // 删除项
        deleteItem(item, index) {
            // 重置侧滑状态
            item.translateX = 0;
            uni.showModal({
                title: '提示',
                content: '确定要删除这条记录吗？',
                success: (res) => {
                    if (res.confirm) {
                        deletWorklog({ id: item.id }).then((res) => {
                            this.$refs.paging.reload();
                        });
                    }
                }
            });
        },

        // 查询列表
        querylist(page, size) {
            this.pageSize = size;
            this.pageNumber = page;
            this.getList();
        }
    }
};
</script>

<style scoped lang="scss">
@import '../../style/documentmanage.scss';

/* 侧滑项容器 */
.swipe-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

/* 内容区域 */
.content {
    position: relative;
    z-index: 1;
    background-color: #fff;
    transition: transform 0.3s ease;
}

/* 操作按钮区域 */
.operate-buttons {
    position: absolute;
    right: 2rpx;
    top: 2rpx;
    display: flex;
    z-index: 0;
}

.edit-btn,
.delete-btn {
    width: 132rpx;
    height: 138rpx;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.edit-btn {
    background-color: #2d75d7;
}

.delete-btn {
    background-color: #ff6060;
    border-top-right-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
}
.mainPge .page-content .Plist .Pitme {
    margin-bottom: 0;
}
</style>    